<template>
  <div class="header">
    <a-row type="flex" justify="center">
      <a-col :xs="13" :sm="9" :md="8" :lg="8" :xl="8" class="logo">
        <div class="logo-box">
          <span class="header-logo" @click="backHome">
            <img src="http://ayong6.free.idcfengye.com/public/ayongStatic/header_logo.png" />
          </span>
          <span class="header-text">专注前端，努力变成更好的自己</span>
        </div>
      </a-col>
      <a-col :xs="5" :sm="10" :md="10" :lg="10" :xl="10">
        <a-menu mode="horizontal" v-model="current">
          <a-menu-item @click="changPath" key="home">
            <a-icon type="home" />首页
          </a-menu-item>
          <a-menu-item v-for="item in navArr" :key="item.router" @click="getData(item)">
            <a-icon :type="item.icon" />
            {{item.typeName}}
          </a-menu-item>
        </a-menu>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  created() {
    this.getTypeInfo();
  },
  data() {
    return {
      navArr: [],
      current: [this.$store.state.activeIndex],
    };
  },
  methods: {
    changPath() {
      window.localStorage.setItem("listPath", "home");
      this.$router.push({ path: "/" });
    },
    backHome() {
      this.$router.push({
        path: "/",
      });
    },
    async getTypeInfo() {
      const res = await this.$http.get("/default/getTypeInfo");
      this.navArr = res.data.data;
    },
    async getData(item) {
      let { id, router } = item;
      window.localStorage.setItem("id", id);
      window.localStorage.setItem("listPath", router);
      this.$store.commit("changeTypeId", { id: id });
      this.$router.push({ path: "/" + item.router });
    },
  },
};
</script>

<style lang="less">
.header {
  background: #fff;
  border-bottom: 1px solid #ccc;
  .logo {
    display: flex;
    .logo-box {
      display: flex;
      align-items: center;
      .header-logo {
        color: #1e90ff;
        display: inline-block;
        img {
          width: 4rem;
        }
      }
      .header-text {
        font-size: 0.6rem;
        color: #999;
        display: inline-block;
        padding-top: 1rem;
        padding-left: 0.3rem;
        user-select: none;
      }
    }
  }
}
.ant-menu {
  border: 0 !important;
  display: flex;
  justify-content: center;
  .ant-menu-item {
    text-indent: -0.3rem;
  }
}
</style>